import Cookies from 'js-cookie'
import { Form, Input, Button, Checkbox } from 'antd';
import IconFont from '../../components/iconfont'//IconFont
import { LockOutlined } from '@ant-design/icons';
import './login.less'
import { useState, useEffect } from 'react'
import nowTime from '../../components/timer'
import axios from 'axios'
import * as TYPES from "../../store/actionType" //biaoshi
import { useSelector, useDispatch } from 'react-redux'  //redux
import cookies from 'js-cookie'
import action from '../../store/action/index'
// import 
const Log = (props) => {
    const message = useSelector(state => state.message)
    const dispatch = useDispatch()
    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        if (checkedss) {
            Cookies.set('userphone', values.username)
            Cookies.set('userpass', values.password)
            //记住密码

        } else {
            //取消记住密码
            Cookies.remove('userphone')
            Cookies.remove('userpass')
        }
        // 发送登录请求
        axios({ method: 'post', url: '/api/front_end/login', data: { account_number: values.username, password: values.password, timer: nowTime(), ip: "192.168.1.193", } }).then((res) => {
            console.log(res);
            if (res.data.code == "01") {
                // console.log(dispatch);
                // console.log(res.data);
                // console.log(res.data.usermess);
                // dispatch({ type: TYPES.DENF_LOGIN, payload: res.data.usermess })
                cookies.set('usertoken',values.username)
                cookies.set('user_id',res.data.usermess.user_id)
                console.log(res.data.usermess);
                dispatch(action.loginAction.setNav(res.data.usermess))
                console.log(props.props.location.state);
                props.props.history.push(props.props.location.state)
            }else if(res.data.code=="02"){
                alert(res.data.mess)
            }
        })

    };
    const onBear = () => {//获取cookie中的密码
        const Userphone = Cookies.get('userphone')
        const Userpass = Cookies.get('userpass')
        const userName = (Userphone === undefined ? fields[0].value : Userphone)
        const passWord = (Userpass === undefined ? fields[1].value : Userpass)
        let hen = [{
            name: ['username'],
            value: userName,
        }, {
            name: ['password'],
            value: passWord,
        }]
        setFields(hen)
    }
    const [checkedss, changeChecked] = useState(false)//是否记住密码
    const [fields, setFields] = useState([  //动态设置input vaules
        {
            name: ['username'],
            value: '',
        },
        {
            name: ['password'],
            value: '',
        },
    ])
    useEffect(() => {
        // console.log(props);
        // console.log(message);
        console.log(props);
        onBear()//刷新页面 查找存储在cookie中的电话 密码
    }, [])
    return (
        <Form
            name="normal_login"
            className="login_form"
            fields={fields}
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Username!',
                    },
                ]}
            >
                <Input className={"log_input"} prefix={<IconFont type="icon-shouji"></IconFont>} placeholder="Username" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Password!',
                    },
                ]}
            >
                <Input
                    className={"log_input"}
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                />
            </Form.Item>
            <Form.Item className={"log_strike"}>
                <Form.Item
                    noStyle
                    name="remember"
                >
                    <Checkbox className={"log_Ji"} checked={checkedss} onChange={(e) => { changeChecked(e.target.checked) }}>记住密码</Checkbox>
                </Form.Item>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="log_form_button">
                    Log in
                </Button>

            </Form.Item>
        </Form>
    );
};
export default Log
// import { useState,useEffect } from 'react'
// import { Form, Input, Button, Checkbox } from 'antd';

// const Log = () => {
//     const onFinish = (values) => {
//         console.log('Success:', values);
//         if (values.remember) {
//             //'登录发送请求'
//             if (checkedss) {
//                 Cookies.set('userphone', values.username)
//                 Cookies.set('userpass', values.password)
//                 //                 //记住密码 然后发送请求
//             } else {
//                 Cookies.remove('userphone')
//                 Cookies.remove('userpass')
//                 //                 //忘记密码 然后发送请求
//             }
//         }
//     };

//     const onFinishFailed = (errorInfo) => {
//         console.log('Failed:', errorInfo);
//     };
//     const [checkedss, changeChecked] = useState(false)//是否记住密码
//     useEffect(()=>{

//     },[])
//     return (
//         <Form
//             name="basic"
//             labelCol={{
//                 span: 8,
//             }}
//             wrapperCol={{
//                 span: 16,
//             }}
//             initialValues={{
//                 remember: true,
//             }}
//             onFinish={onFinish}
//             onFinishFailed={onFinishFailed}
//         >
//             <Form.Item
//                 name="username"
//                 rules={[
//                     {
//                         required: true,
//                         message: 'Please input your username!',
//                     },
//                 ]}
//             >
//                 <Input />
//             </Form.Item>

//             <Form.Item
//                 name="password"
//                 rules={[
//                     {
//                         required: true,
//                         message: 'Please input your password!',
//                     },
//                 ]}
//             >
//                 <Input.Password />
//             </Form.Item>

//             <Form.Item
//                 name="remember"
//             >
//                 <Checkbox checked={checkedss} onChange={(e) => { changeChecked(e.target.checked) }} defaultChecked={false}>Remember me</Checkbox>
//             </Form.Item>

//             <Form.Item
//                 wrapperCol={{
//                     offset: 8,
//                     span: 16,
//                 }}
//             >
//                 <Button type="primary" htmlType="submit">
//                     Submit
//                 </Button>
//             </Form.Item>
//         </Form>
//     );
// };

// export default Log


// import React from 'react'//登录
// import Cookies from 'js-cookie'
// import IconFont from '../../components/iconfont'//IconFont
// import { Form, Input, Button, Checkbox } from 'antd';
// const { Search } = Input

// export default class Log extends React.Component {
//     render() {
//         return (
//             <div>
//                 {/* <Input placeholder="Basic usage"  prefix={<IconFont type="icon-shouji"></IconFont>} />
//                     <Input.Password placeholder="input password" prefix={<IconFont type="icon-dasuozi"></IconFont>} />
//                     <Button type="primary" block  >
//                         登录
//                     </Button> */}
//                 <Form
//                 ref={(e)=>{this.LogForm=e}}
//                     name="basic"
//                     labelCol={{ span: 8 }}
//                     wrapperCol={{ span: 16 }}
//                     initialValues={{ remember: true }}
//                     onFinish={(e) => { this.onFinish(e) }}
//                     onFinishFailed={(e) => { this.onFinishFailed(e) }}
//                 >
//                     <Form.Item
//                         name="username"
//                         rules={[{ required: true, message: 'Please input your username!' }]}
//                     >
//                         <Input  prefix={<IconFont type="icon-shouji"></IconFont>} />
//                     </Form.Item>

//                     <Form.Item
//                         name="password"
//                         rules={[{ required: true, message: 'Please input your password!' }]}
//                     >
//                         <Input.Password  prefix={<IconFont type="icon-dasuozi"></IconFont>} />
//                     </Form.Item>

//                     <Form.Item name="remember" valuePropName={this.state.checkeds} wrapperCol={{ offset: 8, span: 16 }} onChange={(e) => { this.LogBear(e) }}>
//                         <Checkbox>记住密码</Checkbox>
//                     </Form.Item>

//                     <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
//                         <Button type="primary" htmlType="submit" >
//                             Submit
//                         </Button>
//                     </Form.Item>
//                 </Form>
//             </div>
//         )
//     }
//     state = {
//         checkeds: false, //是否记住密码
//         LogForm:""
//     }
//     componentDidMount(){
//         console.log('89');
//         this.getCookies()//获取cookie的账号密码
//     }
//     //登录
//     onFinish = (values) => {
//         console.log(this.state.LogForm);
//         if (values) {
//             if (this.state.checkeds) {//记住密码
//                 Cookies.set('userphone', values.username)
//                 Cookies.set('userpass', values.password)
//                 //记住密码 然后发送请求
//             } else {
//                 Cookies.remove('userphone')
//                 Cookies.remove('userpass')
//                 //忘记密码 然后发送请求
//             }
//         }
//     };
//     //输入框格式错误错误
//     onFinishFailed = (errorInfo) => {
//         console.log('Failed:', errorInfo);
//     };
//     //是否记住密码
//     LogBear = (e) => {
//         this.setState({ checkeds: e.target.checked }, () => {
//             console.log(this.state.checkeds);
//         })
//     }
//     //
//     getCookies = () => {
//         const UserPhone=Cookies.get('userphone')
//         const UserPass=Cookies.get('userpass')
//         // (UserPhone==="undefined"?"":UserPhone)
//         // (UserPass==="undefined"?"":UserPass)
//         this.forceUpdate()
//     }

// }